<!-- 数据可视化中心-数据准备-数据源基本信息管理 -->
<template>
  <el-container class="custom__container">
    <el-aside width="260px">
      <div class="custom__aside">
        <div class="custom__aside-header">
          <div class="title-boxs">
            <hsa-title-box title="分类管理"></hsa-title-box>
            <img src="./images/icon_add.png" alt="" srcset="">
          </div>
          <el-divider class="custom__aside-divider"></el-divider>
        </div>

        <!-- 列表 -->
        <section class="custom__aside-content">
          <el-tree style="max-width: 600px" v-bind="treeOption" />
        </section>
      </div>
    </el-aside>

    <el-main class="custom__main">
      <hsa-adaptive-container>
        <!-- 查询 -->
        <hsa-adaptive-pane>
          <hsa-title-pane>
            <hsa-title-pane-item title="添加">
              <el-form label-width="100">
                <hsa-row :gutter="20">
                  <hsa-col :span="6">
                    <el-form-item label="数据集名称">
                      <el-input placeholder="请输入数据集名称" />
                    </el-form-item>
                    <el-form-item label="所属父级">
                      <div class="sel-tips">
                        <el-select placeholder="请选择">
                          <el-option label="Zone one" value="shanghai" />
                          <el-option label="Zone two" value="beijing" />
                        </el-select>
                        <span class="tip-text">不选择默认第一级</span>
                      </div>
                    </el-form-item>
                  </hsa-col>

                  <template #footbar>
                    <el-button type="default">取 消</el-button>
                    <el-button type="primary"> 保 存 </el-button>
                    <el-button type="danger">删 除</el-button>
                  </template>
                </hsa-row>
              </el-form>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>
        <hsa-adaptive-pane>
          <hsa-title-pane>
            <hsa-title-pane-item title="查询条件">
              <el-form label-width="100">
                <hsa-row :gutter="20">
                  <hsa-col :span="6">
                    <el-form-item label="数据集名称">
                      <el-input />
                    </el-form-item>
                  </hsa-col>
                  <template #footbar>
                    <el-button type="default">重 置</el-button>
                    <el-button type="primary">查 询</el-button>
                  </template>
                </hsa-row>
              </el-form>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>

        <!-- 数据源管理 -->
        <hsa-adaptive-pane auto-height>
          <hsa-title-pane fill>
            <hsa-title-pane-item title="数据集管理" fill>
              <template #toolbar>
                <el-button type="primary" @click="Create">新增</el-button>
              </template>
              <hsa-table v-bind="tableOption" auto-height></hsa-table>
            </hsa-title-pane-item>
          </hsa-title-pane>
        </hsa-adaptive-pane>
      </hsa-adaptive-container>
    </el-main>
  </el-container>

  <!-- 弹出框 -->
  <PopupEditor ref="editor" />
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from "vue";
import PopupEditor from "./popup/editor.vue";
import useCurrentInstance from "@/common/utils/useCurrentInstance";
import { useRouter } from 'vue-router'
// API
import { ApiDataPreparation, dataPreparationList } from "~api/DataPreparation";

// 类型
import type { HsaTableColumn } from "hsa-ui";

const router = useRouter()

interface Refs {
  editor: InstanceType<typeof PopupEditor>;
}

interface Tree {
  label: string;
  children?: Tree[];
}

// 当前实例
const { proxy } = useCurrentInstance<Refs>(getCurrentInstance);

// 查询参数
const QueryParams = reactive({
  ...dataPreparationList(),
  page: 1,
  size: 10,
});

const API_GET_PAGE = async () => {
  try {
    await ApiDataPreparation.list(QueryParams);
  } catch {}
};

// 目录配置
const treeOption = reactive({
  data: ref<Tree[]>([
    {
      label: "第一组",
      children: [
        {
          label: "第三组",
        },
        {
          label: "第四组",
        },
        {
          label: "第五组",
        },
      ],
    },
  ]),
  defaultProps: {
    children: "children",
    label: "label",
  },
  "node-click": (data: Tree) => {
    console.log(data);
  },
});

// 表格配置
const tableOption = reactive({
  data: ref<any[]>([
    {
      date: "2016-05-02",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "端口",
    },
    {
      date: "2016-05-04",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "端口",
    },
    {
      date: "2016-05-01",
      name: "王小虎",
      state: "驱动类型",
      city: "192.168.168.222",
      zip: "端口",
    },
    {
      date: "2016-05-03",
      name: "王小虎",
      state: "驱动类型",
      city: "数据源ip",
      zip: "65535",
    },
  ]),
  showIndex: true,
  columns: ref<HsaTableColumn[]>([
    { align: "center", label: "数据集名称", prop: "date" },
    { align: "center", label: "关联", prop: "name" },
    { align: "center", label: "字段配置", prop: "state" },
    { align: "center", label: "数据探索", prop: "city" },
    {
      align: "center",
      label: "操作",
      width: 220,
      fixed: "right",
      type: "button",
      buttonGroup: [
        {
          type: "primary",
          label: "编辑",
          click: (row) => {
            proxy.$refs.editor.open('编辑',row);
          },
        },
        {
          type: "danger",
          label: "删除",
        },
        {
          type: "primary",
          label: "数据结构",
          click: (row) => {
            router.push({path:'/data-construction/data-structure',query:{...row}})
          },
        },
        
      ],
    },
  ]),
});

// 新增
function Create() {
  proxy.$refs.editor.open('新增');
}

API_GET_PAGE();
</script>

<style lang="scss" scoped>
// 容器
.custom__container {
  height: 100%;
  width: 100%;
  position: relative;
}

// 左侧
.custom__aside {
  background: #fff;
  height: 100%;
  width: 100%;

  // 头部
  .custom__aside-header {
    padding: 10px;
    padding-bottom: 0px;
    .title-boxs{
        display: flex;
        justify-content: space-between;
        align-items: center;
        >img{
            width: 13px;
            height: 16px;
            object-fit: contain;
            cursor: pointer;
        }
    }
  }

  // 分割线
  .custom__aside-divider {
    margin-bottom: 5px;
  }

  // 内容
  .custom__aside-content {
    box-sizing: border-box;
    padding: 10px;
    padding-top: 5px;
    height: calc(100% - 94px);
    overflow-y: auto;
  }
}

// 主要内容
.custom__main {
  padding: 0;
  padding-left: 10px;
}
.sel-tips{
  width: 100%;
  position: relative;
  .tip-text{
    position: absolute;
    top: 0;
    right: -120px;
  }
}
</style>
